import React, { useEffect, useState } from 'react'
import Tabs from '@/components/Tabs/index'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
import { useDispatch } from 'react-redux'
import { allUserchannels, getUserchannels } from '@/store/action/home'
import { Drawer } from 'antd-mobile'
import Icon from '@/components/icon/index'
import Channels from './components/channels/index'
import ArticleList from './components/ArticleList'
import MoreActive from './components/MoreActive/index'
export default function Home() {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getUserchannels())
    dispatch(allUserchannels())
  }, [dispatch])
  const tabs = useSelector((state) => state.home.Userchannels)
  const [open, setopen] = useState(false)
  const onclose = () => {
    setopen(false)
  }
  const [active, setactive] = useState(0)
  const channelactive = (e) => {
    setactive(e)
  }
  return (
    <div className={styles.root}>
      <Tabs tabs={tabs} index={active} onChange={channelactive}>
        {tabs.map((item) => (
          <ArticleList
            key={item.id}
            channelId={item.id}
            aid={tabs[active].id}
          />
        ))}
      </Tabs>
      {/* 频道 Tab 栏右侧的两个图标按钮：搜索、频道管理 */}
      <div className="tabs-opration">
        <Icon type="iconbtn_search" />
        <Icon type="iconbtn_channel" onClick={() => setopen(true)} />
      </div>
      {/* 频道管理抽屉 */}
      <Drawer
        className="my-drawer"
        children={''}
        sidebar={
          <Channels onclose={onclose} index={active} onChange={channelactive} />
        }
        open={open}
      />
      <MoreActive></MoreActive>
    </div>
  )
}
